<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>重构bmi</title>
</head>
<body style="opacity: 1">
<div id="app">
  <div>
    <div
      v-for="(item, index) of statusData"
      :style="{ background: item.bg }"
    >
<!--      {{ currentData.status === item.key }}-->
      <i :style="{ opacity: currentData.status === item.key ? 1 : 0 }">》</i>
      <span>{{ item.key }}</span>
      <span>{{ item.value }}</span>
    </div>
  </div>
  <div class="info" v-if="isShowStatus">
    你的 BMI 值: {{ currentData.bmi }}，身体状态：{{ currentData.status }}
  </div>
  <form @submit.prevent="handleSubmit">
    <div>
      <label>
        <span>身高</span>
        <input v-model="formData.height" type="text">
      </label>
    </div>
    <div>
      <label>
        <span>体重</span>
        <input v-model="formData.weight" type="text">
      </label>
    </div>
    <button>提交</button>
  </form>

  <table>
    <tr>
      <th>#</th>
      <th>日期</th>
      <th>身高</th>
      <th>体重</th>
      <th>BMI</th>
      <th>操作</th>
    </tr>
    </tr>
    <tr v-if="list.length === 0">
      <td colspan="5">暂无数据</td>
    </tr>
    <tr v-else v-for="(item, index) of list">
      <td>{{index + 1}}</td>
      <td>{{ item.height }}</td>
      <td>{{ item.weight }}</td>
      <td>{{ item.bmi }}</td>
      <td>
        <a @click="delItem(item.objectId)" href="javascript:void(0)">删除</a>
      </td>
    </tr>
  </table>
</div>

<script src="../vue.js"></script>
<script>

  const http = ({url, method = 'GET', data = null}) => {
    return new Promise((resolve, reject) => {
      fetch(url, {
        method,
        headers: {
          'content-type': 'application/json'
        },
        body: data === null ? null : JSON.stringify(data)
      }).then(res => res.json())
        .then(res => resolve(res))
        .catch(e => reject(e))
    })
  }

  const app = new Vue({
    data: {
      statusData: [
        { key: '分类', value: 'BMI 范围', bg: 'lightblue' },
        { key: '偏瘦', value: '<= 18.4', bg: 'gray' },
        { key: '正常', value: '18.5 ~ 23.9', bg: 'green' },
        { key: '过重', value: '24.0 ~ 27.9', bg: 'yellow' },
        { key: '肥胖', value: '>= 28.0', bg: 'orange' },
      ],
      isShowStatus: false,
      currentData: {
        status: '',
        bmi: ''
      },
      formData: {
        height: '',
        weight: ''
      },
      list: []
    },
    created() {
      this.getList()
    },
    methods: {
      handleSubmit() {
        http({
          url: 'https://veihwwnelcwq.leanapp.cn/bmi',
          method: 'POST',
          data: this.formData
        }).then(res => {
          this.currentData = res.data
          this.isShowStatus = true
          this.getList()
        })
      },
      getList() {
        http({
          url: 'https://veihwwnelcwq.leanapp.cn/bmi'
        }).then(res => {
            this.list = res.data
          })
      },
      delItem(id) {
        if (confirm('确定要删除数据吗？')) {
          http({
            url: 'https://veihwwnelcwq.leanapp.cn/bmi',
            method: 'DELETE',
            data: {
              id: id
            }
          })
            .then(res => {
              this.getList()
            })
        }
      }
    }
  }).$mount('#app')
</script>
</body>
</html>